<!--站点数据-->
<template>
  <div class='site'>
    <div class='content'>
      <img src='../../../assets/img/bg3.png' alt='' srcset=''>
      <h3>当前负荷（kW）</h3>
      <h2>{{stationInfo.kw_total}}</h2>
    </div>
    <div class='content'>
      <img src='../../../assets/img/bg3.png' alt='' srcset=''>
      <h3>日用电量（kW·h）</h3>
      <h2>{{stationInfo.ele_total}}</h2>
    </div>
    <div class='content'>
      <img src='../../../assets/img/bg3.png' alt='' srcset=''>
      <h3>变压器容量（kva）</h3>
      <h2>35594</h2>
    </div>
    <div class='content'>
      <img src='../../../assets/img/bg3.png' alt='' srcset=''>
      <h3>实时告警</h3>
      <h2>{{stationInfo.alarm_count}}</h2>
    </div>
  </div>
</template>

<script>
export default {
  name: 'site',
  props: ['stationInfo'],
}
</script>

<style lang='scss' scoped>
.site {
  width: 350px;
  margin: 30px 0 0 37px;
  display: flex;
  flex-wrap: wrap;

  .content {
    width: 50%;
    height: 100px;
    margin-bottom: 50px;
    //margin-right: 3%;

    image {
      width: 139px;
      height: 5px;
    }

    h3 {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #5CD3FF;
      margin: 14px 0 22px 0;
    }

    h2 {
      font-size: 32px;
      font-family: Avanti;
      font-weight: 400;
      color: #FFFFFF;
      margin: 0;
    }
  }
}
</style>
